myapp.views.MuseumsList = Ext.extend(Ext.Panel, {
    dockedItems: [{
        xtype: 'toolbar',
        title: 'MuseumsBC',
        items: [
            {
            	id: 'back',
                text: 'Back',
                ui: 'back',
                listeners: {
                    'tap': function () {
                        Ext.dispatch({
                            controller: myapp.controllers.index,
                            action: 'index',
                            animation: { type: 'slide', direction: 'right' }
                        });
                    }
                }
            },
            { xtype: 'spacer' },
            {
                text: 'Credits',
                ui: 'action',
                listeners: {
                    'tap': function () {
                        Ext.dispatch({
                            controller: myapp.controllers.museums,
                            action: 'credits',
                            animation: { type: 'slide', direction: 'up' }
                        });
                    }
                }
            }
        ]
    }],
    items: [{
        scroll: 'vertical',// jl testing
        /* check out
         * http://stackoverflow.com/questions/6141925/sencha-touch-list-is-not-scrolling-right
         */
        height: '100%',// jl testing
        xtype: 'list',
        store: myapp.stores.museums,
        grouped: true,
        indexBar: true,
        itemTpl: '{museumName}',
        onItemDisclosure: function (record) {
            Ext.dispatch({
                controller: myapp.controllers.museums,
                action: 'show',
                id: record.getId()
            });
        },
        listeners: {
        	'itemtap': function(list, index, item, e) {
            Ext.dispatch({
                controller: myapp.controllers.museums,
                action: 'show',
                id: list.store.getAt(index).getId()
                //id: list.store.data.get(item.viewIndex + 1).getId()
            });
        	}
        }
    }],
    initComponent: function () {
        console.log('MuseumsList inited');
        //myapp.stores.museums.load(); // because autoloading, but autoloading is not good for phonegap
        myapp.views.MuseumsList.superclass.initComponent.apply(this, arguments);
    }
});